<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm :init-query="initQuery" v-model:value="queryForm" @submit="queryReloadTable">
        <template #more="{ queryForm }">
          <n-form-item label="操作方法">
            <n-input
              clearable
              v-model:value="queryForm['operateMethodName']"
              placeholder="请输入操作方法查询"
            />
          </n-form-item>
          <n-form-item label="类名">
            <n-input
              clearable
              v-model:value="queryForm['operateMethodClassName']"
              placeholder="请输入类名"
            />
          </n-form-item>
          <n-form-item label="IP地址">
            <n-input clearable v-model:value="queryForm['operateIp']" placeholder="请输入操作IP" />
          </n-form-item>
          <n-form-item label="类别名称">
            <n-input
              clearable
              v-model:value="queryForm['categoryName']"
              placeholder="请输入类别名称"
            />
          </n-form-item>
        </template>
        <template #default="{ queryForm }">
          <n-form-item label="用户名">
            <n-input
              clearable
              v-model:value="queryForm['username']"
              placeholder="请输入用户名查询"
            />
          </n-form-item>
          <n-form-item label="操作类型">
            <n-select
              style="width: 200px"
              clearable
              v-model:value="queryForm['type']"
              :options="bizTypeTextEnumOptions"
            />
          </n-form-item>

          <n-form-item label="成功">
            <n-select
              style="width: 200px"
              clearable
              v-model:value="queryForm['isSuccess']"
              :options="bizSuccessTextOptions"
            />
          </n-form-item>
          <n-form-item label="操作地址">
            <n-input clearable v-model:value="queryForm['uri']" placeholder="输入操作地址" />
          </n-form-item>
          <n-form-item label="操作序列号">
            <n-input
              clearable
              v-model:value="queryForm['requestSeq']"
              placeholder="输入操作序列号"
            />
          </n-form-item>
          <n-form-item label="创建时间">
            <n-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model:formatted-value="queryForm['createTime-gte']"
              type="datetime"
              placeholder="开始时间"
            />
            <span class="ml-3 mr-3">-</span>
            <n-date-picker
              alue-format="yyyy-MM-dd HH:mm:ss"
              v-model:formatted-value="queryForm['createTime-lte']"
              type="datetime"
              placeholder="结束时间"
            />
          </n-form-item>
          <n-form-item label="关键字">
            <n-input
              clearable
              v-model:value="queryForm['searchKey']"
              placeholder="请输入查询关键字"
            />
          </n-form-item>
        </template>
      </QueryForm>
    </div>
    <div>
      <n-space>
        <!--        <n-button type="primary" :disabled="!vCtl.addBtn" @click="doSaveModal()">-->
        <!--          新建-->
        <!--        </n-button>-->
        <!--        <n-button type="warning" :disabled="!vCtl.updateBtn" @click="doUpdateModal()">-->
        <!--          编辑-->
        <!--        </n-button>-->
        <!--        <n-button type="error" :disabled="!vCtl.delBtn" @click="doDeleteModal()">-->
        <!--          删除-->
        <!--        </n-button>-->
      </n-space>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1090"
    >
      <template #tableTitle> </template>
      <template #toolbar> </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, watch } from 'vue';
  import { BasicTable } from '@/components/Table';
  import { QueryForm } from '@/components/QueryForm';
  import httpApi from './httpApi';

  import {
    bizSuccessTextOptions,
    bizTypeTextEnumOptions,
    checkedRows,
    doDeleteModal,
    doSaveModal,
    doUpdateModal,
    initQuery,
    onCheckedRowEvent,
    queryForm,
    reloadTable,
    tableColumns,
    tableRef,
    vCtl,
  } from './Service';

  export default defineComponent({
    components: { BasicTable, QueryForm },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        },
      },
    },
    setup(props, ctx) {
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const loadDataTable = async (res) => {
        console.log('更新', checkedRows.value);
        return await httpApi.selectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value,
        });
      };
      const queryReloadTable = async () => {
        tableRef.value.resetPageReload();
      };
      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log('更新完成');
      });
      return {
        queryReloadTable,
        loadDataTable,
        reloadTable,
        tableColumns,
        vCtl,
        onCheckedRowEvent,
        bizTypeTextEnumOptions,
        bizSuccessTextOptions,
        queryForm,
        tableRef,
        initQuery,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
      };
    },
  });
</script>

<style lang="less" scoped></style>
